<template>
  <!-- 随机推荐 -->
  <div class="randRec">
    <van-grid :column-num="2">
      <van-grid-item
        class="goodsBox"
        v-for="item in info"
        :key="item.id"
        @click="goDetgoods(item.id)"
      >
        <div class="imgBox">
          <img v-lazy="item.imageHost + item.mainImage" alt="" />
        </div>
        <p class="title">
          {{ item.name }}
        </p>
        <p class="price">￥ {{ item.price }}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "",
    };
  },
  methods: {
    // 跳转到详情页
    goDetgoods(val) {
      this.$router.push(`/goodsEle${val}`);
    },
  },
  created() {
    // 获取随机推荐列表数据
    let info = {
      type: "get",
      url: "/product/recommend",
    };
    this.$netWork(info).then((res) => {
      if (res.data.status === 0) {
        this.info = res.data.data;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.goodsBox {
  .imgBox {
    width: 100%;
    height: 160px;
    background-color: #ccc;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    width: 100%;
    height: 33px;
    margin: 11px 0;
    font-size: 14px;
    color: #333;
    text-align: left;
    overflow: hidden;
  }

  .price {
    width: 100%;
    text-align: left;
    font-size: 17px;
    color: #f63515;
  }
}
</style>
